<!DOCTYPE html>
<html lang="en">
<head>
  <script src="velocity.js"></script>
  <script src="lodash.js"></script>
  <script src="vue.js"></script>
  <style>
      .list-item {
          display: inline-block;
          margin-right: 10px;
          background-color: red;
          border-radius: 50%;
          width: 25px;
          height: 25px;
          text-align: center;
          line-height: 25px;
          color: #fff;
      }
.list-enter,.list-leave-to {
    opacity: 0;
    transform: translateY(100px) scale(3) rotate(360deg);
}

.list-enter-active,.list-leave-active {
    transition: all 1s;
}
  </style>
</head>
<body>
    <div id="app">
      <button @click="add">随机插入一个数字</button>
      <button @click="remove">随机移除一个数字</button>
      <button @click="shuffle">洗牌</button>
      <transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
    {{item}}
</span>
      </transition-group>
      </div>
<script>
    var vm = new Vue({
        el: '#app',
        data : {
            items : [1,2,3,4,5,6,7],
            nextNum : 8
        },
        methods : {
            randomIndex(){
             return Math.floor(Math.random() * this.items.length)
            },
            add(){
                this.items.splice(this.randomIndex(),0,this.nextNum++)
            },
            remove(){
                this.items.splice(this.randomIndex(),1);
            },
            shuffle() {
                this.items = _.shuffle(this.items);
            }
        }
    });
</script>
</body>
</html>